<template>
  <div class="content">
    <div class="app-searchTop">
      <div class="app-searchTop_back" @click="index">
        返回
      </div>
      <div class="app-searchTop_search">
        <input
          type="text"
          v-model="msg"
          @keyup.enter="pushHistory"
          @click="associateShow"
        />
      </div>
      <div class="app-searchTop_title" @click="pushHistory">搜索</div>
    </div>
    <!--联想模块-->
    <div class="app-esarch_associate" v-if="associateIsShow">
      <div class="app-esarch_details"
           v-for="(val, key) in simulation"
           :key="key">{{val}}</div>
    </div>
    <!--历史记录模块-->
    <div v-else>
      <div class="app-history">
        <div class="app-history_title">
          <span class="title_left">历史搜索</span>
          <span class="img" @click="clearhistory">
            <img src="./icons/下载.png" alt="#" />
          </span>
        </div>
        <div class="app-history_details">
          <span v-for="(val, key) in history" :key="key">{{ val }}</span>
        </div>
      </div>
      <div class="app-hotSearch">
        <div class="app-hotSearch_title">
          热搜
        </div>
        <div class="app-hotSearch_commodity">
          <span v-for="(val, key) in temp" :key="key">{{val}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  data() {
    return {
      msg: '',
      simulation: [],
      simulation_1: [],
      temp: [],
      history: [],
      associateIsShow: false,
    };
  },
  methods: {
    index() {
      if (this.associateIsShow === true) {
        this.associateIsShow = false;
      } else {
        this.$router.push({ path: '/index/hot' });
      }
    },
    pushHistory() {
      if (this.msg !== '') {
        this.history.push(this.msg);
        this.$router.push({ path: '/searchDetails', query: { msg: this.msg } });
      } else {
        this.$message1({
          messageIsShow: true,
          type: 'info',
          msg: '请输入搜索内容',
          delay: 2000,
        });
      }
    },
    associateShow() {
      this.associateIsShow = true;
    },
    clearhistory() {
      this.history = [];
    },
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.$http._commoditys().then((res) => {
      res.data.commodity.forEach((value) => {
        this.temp.push(value.word);
      });
    });
    this.history.push(this.$route.query.msg);
  },
  watch: {
    msg(val) {
      this.simulation_1 = [];
      this.temp.forEach((value) => {
        // eslint-disable-next-line no-console
        this.simulation_1.push(this.msg.concat(value));
      });
      this.simulation = [];
      this.simulation = this.simulation_1;
      if (val === '') {
        this.simulation = [];
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  .app-searchTop {
    line-height: 200px;
    width: 100vw;
    font-size: 0;
    div {
      font-size: 40px;
      display: inline-block;
      text-align: center;
    }
    .app-searchTop_back {
      width: 130px;
      height: inherit;
    }
    .app-searchTop_search {
      width: 902px;
      line-height: 123px;
      border: none;
      background: #f2f2f2;
      border-radius: 45px;
      input {
        width: 902px;
        line-height: 123px;
        border: none;
        border-radius: 45px;
        text-indent: 116px;
        background: url("./icons/query.png") no-repeat 3.80645vw 2.80645vw;
        background-size: 52px;
        color: #666666;
      }
    }
    .app-searchTop_title {
      width: 15.93548vw;
      font-size: 56px;
      font-weight: bolder;
    }
  }
  .app-esarch_associate {
    width: 100vw;
    border-top: 1px solid #f2f2f2;
    padding: 0 15px;
    box-sizing: border-box;
    .app-esarch_details {
      line-height: 10.03226vw;
      border-bottom: 1px solid #f2f2f2;
      text-indent: 1rem;
      font-size: 50px;
    }
  }
  .app-history {
    padding: 0 45px;
    box-sizing: border-box;
    width: 100vw;
    .app-history_title {
      .title_left {
        display: inline-block;
        font-size: 44px;
        width: 250px;
        text-indent: 70px;
        line-height: 121px;
        font-weight: bolder;
        background: url("./icons/TIM截图20190603192749.png") no-repeat -0.19355vw
          2.3vw;
        background-size: 60px;
      }
      .img {
        position: relative;
        top: 1.80645vw;
        width: 50px;
        height: 50px;
        float: right;
        img {
          height: inherit;
          width: inherit;
          object-fit: cover;
        }
      }
    }
    .app-history_details {
      span {
        display: inline-block;
        padding: 0 40px;
        line-height: 83px;
        background: #f2f2f2;
        color: #818181;
        border-radius: 40px;
        text-align: center;
        font-size: 40px;
        margin: 5px;
      }
    }
  }
  .app-hotSearch {
    width: 100vw;
    padding: 0 45px;
    box-sizing: border-box;
    margin-top: 60px;

    .app-hotSearch_title {
      line-height: 105px;
      font-size: 45px;
      font-weight: bold;
      text-indent: 70px;
      background: url("icons/hot.png") no-repeat 0.80645vw 1.48387vw;
      background-size: 60px;
    }

    .app-hotSearch_commodity {
      span {
        display: inline-block;
        padding: 0 40px;
        line-height: 83px;
        background: #f2f2f2;
        color: #818181;
        border-radius: 40px;
        text-align: center;
        font-size: 40px;
        margin: 5px;
      }
    }
  }
}
</style>
